import React, {Component} from 'react';

import {Form, Row, Col, Select, DatePicker, Button,Input} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
import moment from 'moment'
import {payTypeOptions, shippingMethodOptions, invoiceFlagOptions, deviceTypeOptions} from '../constant/options';

import noop from 'util/noop';


export default class AdvancedSearch extends Component {
    static defaultProps = {
        changeExpand: noop,
        onSearch: noop
    }


    render() {
        const {form: {getFieldDecorator, resetFields}, changeExpand, onSearch} = this.props;



        //支付方式
        const payTypeField = getFieldDecorator('buyerUserName')(
            <Input size="large" placeholder="申请人"/>
        );

        //配送方式
        const ShippingMethodField = getFieldDecorator('itemName')(
            <Input size="large" placeholder="商品名称"/>
        );

        //下单时间
        const rangePickerField = getFieldDecorator('range_picker')(
            <RangePicker format="YYYY/MM/DD"
                         placeholder={['申请开始日期','申请结束日期']}/>
        );

        //发票情况
        const invoiceFlagField = getFieldDecorator('invoiceFlag')(
            <Select size="default" placeholder="发票情况">
                {
                    invoiceFlagOptions.map(invoice => {
                        let {text, ...rest} = invoice;
                        return <Option {...rest}>{text}</Option>
                    })
                }
            </Select>
        );

        const needReturnField = getFieldDecorator('isNeedReturn')(
            <Select size="default" placeholder="是否退货" allowClear={true} >
                <Option value="1">售后退货</Option>
                <Option value="0">售中退货</Option>
            </Select>
        );

        return (
            <div className="advance-search">
                <div className="ant-advanced-search-form">
                    <Row gutter={16}>
                        <Col span={6}>
                            <FormItem>{payTypeField}</FormItem>
                        </Col>
                        <Col span={6}>
                            <FormItem wrapperCol={{span: 24}}>{ShippingMethodField}</FormItem>
                        </Col>
                        <Col span={6}>
                            {/*<FormItem wrapperCol={{span: 24}}>{invoiceFlagField}</FormItem>*/}

                            <FormItem wrapperCol={{span: 24}}>{needReturnField}</FormItem>
                        </Col>
                        <Col span={6}>
                            <FormItem wrapperCol={{span: 24}}>
                                <div className="qm-range-picker open">
                                    {rangePickerField}
                                    <div className="fast-choose">
                                        <a href="javascript:void(0);" onClick={()=>this.quickPick(7)}>近7天</a>
                                        <a href="javascript:void(0);" className="ml10" onClick={()=>this.quickPick(30)}>近30天</a>
                                    </div>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={6}>
                            {/*<FormItem wrapperCol={{span: 24}}>{rangePickerField}</FormItem>*/}
                        </Col>
                        <Col span="6" style={{ float: 'right', textAlign: "right" }}>
                            <div>
                                <a className="pushr" href="javascript:;" onClick={()=>changeExpand()}>简易搜索</a>
                                <Button type="primary" size="default" htmlType="submit" onClick={onSearch}>搜索</Button>
                                <Button size="default" onClick={()=>resetFields()}>清除条件</Button>
                            </div>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }

     /**
     * 快捷选择时间
     * @param days
     */
    quickPick(days) {
        const {form: {setFieldsValue}} = this.props;

        setFieldsValue({
            range_picker: [moment().subtract(days - 1, 'days'), moment()]
        })
    }
}